import { Table,  Col, Row, Button ,DatePicker ,Select,Space, } from 'antd';

import React, { useState} from 'react';
const { RangePicker } = DatePicker;
import {
  PaperClipOutlined,SearchOutlined
} from '@ant-design/icons';

import styles from './style.less'
import SelectArea from '../components/selectArea';
const { Option } = Select;

const MultipleRateReport: React.FC = () => {


  const dataSource = [
    {
      location: 'a栋宿舍配电箱',
      startTime: '2021-09-03 09:53:00',
      initialPower: 50.35,
      endTime: '2021-09-03 09:53:00',
      endPower: 50.35,
      electricityConsumption: 50.35,
    },
    {
      location: 'a栋宿舍配电箱',
      startTime: '2021-09-03 09:53:00',
      initialPower: 50.35,
      endTime: '2021-09-03 09:53:00',
      endPower: 50.35,
      electricityConsumption: 50.35,
    },{
      location: '合计',
      startTime: '--',
      initialPower:'--',
      endTime: '--',
      endPower: '--',
      electricityConsumption: 100.7,
    },
  ];

  const columns = [
    {
      title: '区域位置',
      dataIndex: 'location'
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
    },
    {
      title: '起始电能(kW·h)',
      dataIndex: 'initialPower',
    }, {
      title: '结束时间',
      dataIndex: 'endTime',
    },
    {
      title: '结束电能(kW·h)',
      dataIndex: 'endPower',
    }, {
      title: '用电量(kW·h)',
      dataIndex: 'electricityConsumption',
    }
  ];

    
    return (
      <>
        <Row gutter={24}  style={{ margin: '-16px 0 '}} > 
          <Col xl={5} lg={5} md={5} sm={6} xs={6} style={{  padding: '24px 12px', borderRight: '1px solid #355fb8' }}>
            <SelectArea/>
          </Col>
          <Col xl={19} lg={19} md={19} sm={18} xs={18} style={{ padding: 22 }} className={styles.servuychart}>
            <Row className={styles.tabletop}>
              <div  className={styles.inputBg} >
                 <RangePicker popupStyle={{ background: 'rgb(20, 49, 115)'}}  bordered={false}  showTime />
              </div>
              <div>
                <Button className={styles.primaryBtnBg} style={{marginRight:12}} type="primary" ><SearchOutlined /> 搜索 </Button>

                 <Button className={styles.exporttBtn} type="primary" ><PaperClipOutlined /> 导出 </Button>
              </div>
            </Row>
            <Table dataSource={dataSource} columns={columns} pagination={{ position: ['none','none'] }} />
          </Col>
        </Row>
      </>
    );
};

export default MultipleRateReport;